<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<script scr="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<button>按钮</button>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci nisi iusto assumenda magni fugiat dolorum, eius ipsa repellendus eum cum excepturi voluptates ipsam amet alias praesentium quos? Modi, doloribus voluptate.</p>
		<div style="width: 100px; height: 100px; background: #000;"></div>
		<span>文本</span>
		
		<input type="button" value="按钮2">
		<input type="text">
		
		<script>
			/*   JavaScript：基础语法+*DOM（页面）+BOM（浏览器）
			     JQuery操作DOM方式盘方式，36个函数】 -- 改变页面效果
				 1.元素内容操作：操作元素和元素内容的方式【3个函数】
				 .html()  .val()  .text()
				 
				 2.元素属性操作【四个函数】
				 .attr()  .removerattr()  .prop()  removrProp()
				 
				 3.元素类名操作：【四个函数】
				 addClass()  removeClass()  toggleClass()  haasClass()
				 
				 4.元素样式【位置】操作：【五个函数】
				 
				 
				 5.元素删除和插入操作：【七个函数】
				 6.元素遍历操作：【六个函数】
				 7.动画操作：【七个操作】
				 
				 
			*/
			$("input[type='button']").click(function(){
				$("input[type='text']").val("输出文本效果");
			});
			
			$("div").mouseenter(function(){
				$("span").html("<a hre='#'>超文本</a>");
			});
			
			/* JQuery操作DOM：通过点击一个元素绑定一个时间给另外一个元素改变效果
			 .html（）函数  ：增加一个元素，覆盖原来的html
			 .val函数         input元素使用，改变修改表单元素文本
			 */
			 
			 $('button').click(function(){
				 //DOM操作--改变页面其他元素
				 //DOM操作--改变p元素改成marguee元素
				$('p').html("<marguee>跑马灯....</marguee>")
			 });
			 /* 练习： 100*100框，div 鼠标移动上去，文本改成 超文本
			           按钮和输入框，点击按钮，输入框输出文字效果
					   */
			$('button')
		</script>
	</body>
</html>